<template>
  <el-select
    v-bind="$attrs"
    v-on="$listeners"
    :value="value"
    :class="css"
    :placeholder="placeholder"
    @change="handleChange"
  >
    <el-option
      v-for="item in dataList"
      :key="item.agency_id"
      :label="item.agency_name"
      :value="item.agency_id"
    ></el-option>
  </el-select>
</template>
<script>
export default {
  components: {},
  props: {
    value: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      loading: false,
      dataList: [],
    }
  },
  computed: {
    clientId() {
      return this.$store.getters.clientId
    },
    filterable() {
      return this.$attrs && this.$attrs.filterable !== false
    },
    placeholder() {
      return (this.$attrs && this.$attrs.placeholder) || '请选择保险公司'
    },
    css() {
      return (this.$attrs && this.$attrs.class) || 'w-100'
    },
  },
  watch: {},
  created() {
    this.getData()
  },
  mounted() {},
  methods: {
    getData() {
      this.loading = true
      this.$api
        .getData('credit', 'datum_customer_insurance_agency')
        .then(res => {
          this.dataList = (res && res.data) || []
        })
        .catch(() => {})
        .then(() => {
          this.loading = false
        })
    },

    handleChange(val) {
      const index = this.dataList.findIndex(it => it.agency_id === val)
      // el-select组件已经有change事件，此处避免冲击
      this.$emit('select', val, index > -1 ? this.dataList[index] : {})
    },
  },
}
</script>
<style lang="scss" scoped></style>
